/*自定义style*/
$baseColor: #33c99e;
$colorHbg: #1f262d;
$color_f: #fff;
$color_d: #ddd;
$color_3: #333;
$color_6: #666;
$color_9: #999;
$color_c9: #c9c9c9;
$boxShadow: 0 0 20px rgba(0,0,0,.16);
$border_d: 1px solid #ddd;

/*字体引入*/
@font-face {
  font-family: 'homeFont';
  src: url("/static/fonts/homeFont.ttf");
}
.homeFont{
  font-family: homeFont;
}

html,body,#app,#app>.ivu-layout,.loginPage{height: 100%;}
body{padding: 0;margin: 0;font-family: 微软雅黑;color: $color_3;}
h1,h2,h3,h4,h5{font-weight: normal;}

.verticalCenter{display: flex;justify-content: center;align-items: center;}
.bg_f{background: $color_f;box-shadow: $boxShadow;margin-bottom: 20px;}

/*按钮*/
.btn_1{
  background: $baseColor!important;
  color: $color_f!important;
  border: none!important;
  padding: 0!important;
  font-size: 16px!important;
  border-radius: 0!important;
  &:hover,&:focus,&:active{
    border: none!important;
    background: $baseColor!important;
    color: $color_f!important;
    box-shadow: none!important;
  }
  &.loginBtn{
    width: 100%!important;
    height: 40px!important;
    margin: 16px 0;

  }
}
.ivu-btn-text{
  background: $color_f;
  color:$baseColor;
  border: 1px solid $baseColor;
  &:hover,&:focus,&:active{
    background: $color_f;
    color:$baseColor;
    border: 1px solid $baseColor;
    box-shadow: none;
  }
}
.ivu-btn-primary{
  background: $baseColor;
  color:$color_f;
  border: 1px solid $baseColor;
  &:hover,&:focus,&:active{
    background: $baseColor;
    color:$color_f;
    border: 1px solid $baseColor;
    box-shadow: none;
  }
}
/*输入框*/
.ivu-input{
  border: 1px solid $color_c9!important;
  color: $color_3!important;
  border-radius: 0!important;
  &:hover,&:focus{
    box-shadow: none!important;
    border: 1px solid $baseColor!important;
  }
}

/*Select*/
.ivu-select{
  .ivu-select-selection{
    border-radius: 0;
    border: 1px solid $color_c9;
    box-shadow: none;
    .ivu-select-placeholder{
      height: 26px;
      line-height: 26px;
    }
    &:hover{
      border-color: $baseColor;
    }
  }
  .ivu-select-dropdown{
    .ivu-select-item-selected{
      color: $baseColor;
    }
  }
}

/*datePicker*/
.ivu-date-picker{
  .ivu-icon{
    width: 28px;
    height: 28px;
    line-height: 28px;
  }
  .ivu-date-picker-cells-cell{
    &:hover{
      em{
        background: rgba(51,201,158,0.3);
      }
    }
  }
  .ivu-date-picker-cells-focused{
    em{
      box-shadow: 0 0 0 1px $baseColor inset;
    }
  }
  .ivu-date-picker-cells-cell-selected{
    em{
      background: $baseColor;
      box-shadow: 0 0 0 1px $baseColor inset;
    }
  }
  .ivu-date-picker-cells-cell-today{
    em{
      &:after{
        background: $baseColor;
      }
    }
  }
  .ivu-date-picker-cells-month{
    .ivu-date-picker-cells-cell-focused{
      background: rgba(51,201,158,0.3);
    }
  }
  &.ivu-date-picker-focused{
    input{
      border-color: $baseColor;
      box-shadow: none;
    }
  }
}

/*表格*/
.ivu-table-wrapper{
  .ivu-table{
    &:after{
      width: 0;
    }
    font-size: 13px;
    .ivu-table-cell{
      >div{
        span{
          cursor: pointer;
          color: $baseColor;
          &.s_1{
            display: inline-block;
            width: 20%;
          }
        }
      }
    }
  }
}

/*分页*/
.ivu-page{
  text-align: right;
  padding: 25px 0;
  .ivu-page-total{
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
  }
  .ivu-page-item,.ivu-page-prev,.ivu-page-next{
    border-radius: 0;
    border: 1px solid $color_c9;
    min-width: 30px;
    height: 30px;
    line-height: 28px;
    &:hover{
      border-color: $baseColor;
      a{
        color: $baseColor;
      }
    }
  }
  .ivu-page-item-active{
    border-color: $baseColor;
    a{
      color: $baseColor;
    }
  }
  .ivu-page-disabled{
    &:hover{
      border: 1px solid $color_c9;
      a{
        color: #ccc;
      }
    }
  }
}

/*Modal*/
.ivu-modal{
  .ivu-modal-content{
    border-radius: 0;
    .ivu-modal-header{
      border-bottom: none;
      padding: 0 10px;
      height: 36px;
      background: $baseColor;
      .ivu-modal-header-inner{
        height: 36px;
        line-height: 36px;
        color: $color_f;
        font-size: 15px;
      }
    }
    .ivu-modal-close{
      top: 0;
      .ivu-icon{
        font-size: 36px;
        font-weight: 600;
        color: $color_f;
        top: 0;
      }
    }
  }
}

.el-header{
  padding: 0 50px;
  height: 64px;
  line-height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: $colorHbg!important;
  color: rgba(255,255,255,.8);
  .logo{
    *{
      vertical-align: middle;
    }
    img{
      width: 30px;
      height: 30px;
      margin-right: 3px;
    }
    span{
      font-size: 18px;
    }
  }
  ul{
    list-style: none;
    line-height: 62px;
    border-left: 1px solid #000;
    border-right: 1px solid #2e363f;
    li{
      display: inline-block;
      padding: 0 12px;
      border-left: 1px solid #2e363f;
      border-right: 1px solid #000;
      font-size: 14px;
      &:last-of-type{
        cursor: pointer;
      }
    }
  }
}
.el-main{
  padding: 0 !important;
}


/*侧边栏*/
.ivu-layout-sider{
  background: #2e363f!important;
  height: 900px;
  overflow-y: scroll;
  overflow-x: hidden;
}
/*---滚动条默认显示样式--*/
::-webkit-scrollbar-thumb{

  height:50px;
  outline-offset:-2px;
  outline:2px solid #fff;
  -webkit-border-radius:4px;
  border: 2px solid #fff;
}

/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover{

  height:50px;
  -webkit-border-radius:4px;
}


/*---滚动条大小--*/
::-webkit-scrollbar{
  width:10px;
  height:8px;
}

/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece{

  -webkit-border-radius:0;
}

::-webkit-scrollbar-track { background-color: #eee; } /* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); } /* 滑块颜色 */
::-webkit-scrollbar-button { background-color: #eee; } /* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-corner { background-color: black; } /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
/*菜单*/


/*登录*/
.loginPage{
  background: radial-gradient(circle, #28777a, #24498c);
  position: relative;
  .loginBox{
    width: 360px;
    background: $color_f;
    padding: 40px;
    margin-left: -180px;
    position: absolute;
    top: 22%;
    left: 50%;
    h2{
      color: $color_3;
      font-size: 19px;
      font-weight: 600;
      margin-bottom: 30px;
    }
    h4{
      color: $color_6;
    }
    .ivu-form-item{
      margin-bottom: 26px;
      .ivu-icon{
        width: 46px;
        height: 30px;
        font-size: 24px;
        line-height: 30px;
        border-left: #dfe3e6 1px solid;
        margin: 8px 0;
        color: $color_6;
      }
      .ivu-input{
        height: 46px;
        font-size: 15px;
      }
      &.ivu-form-item-error .ivu-input:focus{
        box-shadow: none;
      }
    }
  }
}

.chart_h360{width: 100%;height: 360px;}

.padding_20{padding: 20px;}
.padding_15{padding: 15px;}


/*页面*/
.page{
  padding: 20px;
}

.deadline{
  font-size: 17px;
  margin-bottom: 15px;
}


.el-breadcrumb{
  &.title{
    background: $baseColor;
    padding-left: 10px;
    height: 40px;
    line-height: 40px;
    .el-breadcrumb__item{
      span, .is-link{
        color: #fff;
        font-weight: 700;
        &:hover{
          color: #fff !important;
        }
      }

    }

  }
}
.input_1{
  width: 160px!important;
  .ivu-input{
    height: 32px;
  }
}

.btn_1{
  width: 70px;
  height: 32px;
}

.datePicker_1{
  width: 160px;
  .ivu-input{
    height: 32px;
  }
}

.select_1{
  width: 160px!important;
}


// 详细页面
.detailView{
  font-size: 14px;
  color: #515a6e;
  border-top: 1px solid #f1f1f1;
  .detail{
    display: flex;
    align-items: center;
    border: 1px solid #f1f1f1;
    border-top: 0;
    .name{
      min-width: 120px;
      text-align: right;
      padding: 10px 20px 10px 0;
      border-right: 1px solid #f1f1f1;
    }
    .value{
      font-weight: 600;
      padding-left: 20px;
      img{
        width: 100px;
      }
    }
  }
}
.operationView{
  display: flex;
  justify-content: center;
  .operation_btn{
    margin: 20px 10px 50px 10px;
  }
}
// 开关
.ivu-switch-checked {
  border-color: $baseColor;
  background-color: $baseColor;
}
.ivu-btn>.ivu-icon+span, .ivu-btn>span+.ivu-icon {
  margin-left: 0;
  margin-right: 4px;
}
.pd-20 {
  padding: 20px !important;
}
.mt-20 {
  margin-top: 20px !important;
}
.w-200 {
  width: 200px !important;
}
.w-300 {
  width: 300px !important;
}
.w-400 {
  width: 450px !important;
}
ul,
li {
  list-style-type: none;
}
.fl{float: left;}
.fr{float: right;}
